<template>
    <div class="page-content">
        <div class="comm-content" ref="box">每月收成</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    methods: {
        screen(){
            this.myEcharts.resize()
            let width = this.$refs.box.offsetWidth
            let num = width/100*6
            let options = {
                title:{
                    textStyle:{
                        fontSize:num
                    }
                }
            }
            this.myEcharts.setOption(options)
        },
        initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '主要地区农作物种植增长趋势',
                },
                grid:{
                    left: '12%',
                    right: '10%',
                    top: '20%',
                    bottom: '10%',
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    left: 12,
                    top: '9%',
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                },
            }
            this.myEcharts.setOption(options)
        },
        async getData(){
            let datalist = await this.$http('/api/CropGrowthTrend')
            console.log(datalist);
            let datamonth = datalist.data[0].content.map(item=>{
                return item.month
            })
            let seriesdata = datalist.data.map(item=>{
                let data1 = item.content.map(item1=>{
                    return item1.area
                })
                return {
                    type:'line',
                    name:item.city,
                    data:data1,
                    smooth:true
                }
            })
            this.setEcharts(datamonth,seriesdata)
        },
        setEcharts(datamonth,seriesdata){
            let options = {
                xAxis:{
                    data:datamonth
                },
                series:seriesdata
            }
            this.myEcharts.setOption(options)
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        this.screen()
        window.addEventListener('resize',this.screen)
    },
}
</script>
<style scoped></style>